<template>
  <codemirror
      ref="cmEditor"
      :options="options"
      :value="code"
      @focus="onCmFocus"
      @input="onCmCodeChange"
      @ready="onCmReady"
  />
</template>

<script>
// import language js
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'

// import theme style
//import 'codemirror/theme/base16-dark.css'
import {codemirror} from '@/plugins/codemirror'
// import more 'codemirror/some-resource...'
export default {
  name: "codeEditor",
  components: {
    codemirror
    //codemirror: () => import('@/plugins/codemirror')
  },
  data () {
    return {
      code: 'const a = 10',
      options: {
        tabSize: 4,
        mode: 'text/javascript',
        lineNumbers: true,
        line: true,
        // more CodeMirror options...
      }
    }
  },
  methods: {
    onCmReady(cm) {
      console.log('the editor is readied!', cm)
    },
    onCmFocus(cm) {
      console.log('the editor is focused!', cm)
    },
    onCmCodeChange(newCode) {
      console.log('this is new code', newCode)
      this.code = newCode
    }
  },
  computed: {
    codemirror() {
      return this.$refs.cmEditor.codemirror
    }
  },
  mounted() {
    console.log('the current CodeMirror instance object:', this.codemirror)
    // you can use this.codemirror to do something...
  }
}
</script>

<style scoped>

</style>
